Configuring Defaults

The easiest way to set a look and feel for your plumbing is to override the defaults that jsPlumb uses. If you do not do this you are forced to provide your overridden values on every call. Every argument to the connect and addEndpoint methods has an associated default value in jsPlumb.

The defaults that ship with jsPlumb are stored in jsPlumb.Defaults, which is a Javascript object. Valid entries, and their initial values, are:

Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable   : true,
ConnectionOverlays  : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors  : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fillStyle : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { lineWidth : 8, strokeStyle : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"

Note that in EndpointHoverStyle, the default fillStyle is null. This instructs jsPlumb to use the strokeStyle from the attached Connector's hover style to fill the Endpoint.

Note also that you can specify either or both (or neither) of EndpointStyle and EndpointStyles. This allows you to specify a different style for each Endpoint in a Connection. Endpoint and Endpoints use the same concept. jsPlumb will look first in the individual Endpoint/EndpointStyle arrays, and then fall back to the single default version.

You can override these defaults by including this in a script somewhere:

jsPlumb.Defaults.PaintStyle = {
    lineWidth:13,
    strokeStyle: 'rgba(200,0,0,0.5)'
}

jsPlumb.Defaults.DragOptions = { cursor: "crosshair" };

jsPlumb.Default.Endpoints = [ [ "Dot", 7 ], [ "Dot", 11 ] ];

jsPlumb.Defaults.EndpointStyles = [{ fillStyle:"#225588" }, { fillStyle:"#558822" }];

...after the jsPlumb script has been loaded of course! Here we have specified the following default behaviour:

Explanation of each Default setting

jsPlumb.importDefaults

There is a helper method called importDefaults that allows you to import a set of values with just one call to jsPlumb. Here's the previous example using importDefaults:

jsPlumb.importDefaults({
    PaintStyle : {
        lineWidth:13,
        strokeStyle: 'rgba(200,0,0,100)'
    },
    DragOptions : { cursor: "crosshair" },
    Endpoints : [ [ "Dot", 7 ], [ "Dot", 11 ] ],
    EndpointStyles : [{ fillStyle:"#225588" }, { fillStyle:"#558822" }]
});

Providing defaults to jsPlumb.getInstance

When you create a new instance of jsPlumb via jsPlumb.getInstance you can provide defaults for that instance as a constructor parameter - here's how we'd create a new instance using the same default values as the example above:

jsPlumb.getInstance({
    PaintStyle : {
        lineWidth:13,
        strokeStyle: 'rgba(200,0,0,100)'
    },
    DragOptions : { cursor: "crosshair" },
    Endpoints : [ [ "Dot", 7 ], [ "Dot", 11 ] ],
    EndpointStyles : [{ fillStyle:"#225588" }, { fillStyle:"#558822" }]
});